<template>
	<div class="container">
		<el-form ref="formRef" :model="form" label-width="150px" label-postition="right" class="flex flex-wrap diygw-col-24">
			<div class="flex diygw-col-24">
				<el-form-item class="diygw-el-rate" prop="appid" label="小程序APPID">
					<el-input type="text" placeholder="请输入小程序appid" v-model="form.appid"> </el-input>
				</el-form-item>
			</div>
			<div class="flex diygw-col-24">
				<el-form-item class="diygw-el-rate" prop="secret" label="小程序密钥">
					<el-input type="text" placeholder="请输入小程序secret" v-model="form.secret"> </el-input>
				</el-form-item>
			</div>
			<div class="flex diygw-col-24">
				<el-form-item class="diygw-el-rate" prop="pay_mch_id" label="商户号">
					<el-input type="text" placeholder="请输入小程序mch_id" v-model="form.pay_mch_id"> </el-input>
				</el-form-item>
			</div>
			<div class="flex diygw-col-24">
				<el-form-item class="diygw-el-rate" prop="pay_signature" label="支付密钥">
					<el-input type="text" placeholder="支付signature" v-model="form.pay_signature"> </el-input>
				</el-form-item>
			</div>
			<div class="flex diygw-col-24">
				<el-form-item prop="cert_path" class="diygw-el-rate" local="1" label="支付证书">
					<diy-uploadinput local="1" type="file" accept=".pem" v-model="form.cert_path" title="支付证书"></diy-uploadinput>
					<div class="diygw-help-text">微信支付证书（apiclient_cert.pem），前往微信商家平台下载，文件名一般为apiclient_cert.pem</div>
				</el-form-item>
			</div>
			<div class="flex diygw-col-24">
				<el-form-item prop="cert_key" class="diygw-el-rate" local="1" label="支付证书密钥">
					<diy-uploadinput local="1" type="file" accept=".pem" v-model="form.cert_key" title="支付证书密钥"></diy-uploadinput>
					<div class="diygw-help-text">微信支付证书密钥（apiclient_key.pem），前往微信商家平台下载。文件名一般为apiclient_key.pem</div>
				</el-form-item>
			</div>
			<div class="padding-xs flex diygw-col-24 justify-center"><el-button @click="submitForm" type="primary" class="margin-xs"> 提交 </el-button> <el-button @click="resetForm" type="danger" class="margin-xs"> 重置 </el-button></div>
		</el-form>
		<div class="clearfix"></div>
	</div>
</template>

<script>
	import { useRouter, useRoute } from 'vue-router';
	import { storeToRefs } from 'pinia';
	import { useUserInfo } from '@/stores/userInfo';

	import { ElMessageBox, ElMessage } from 'element-plus';
	import { postData } from '@/api';

	import DiyUploadinput from '@/components/upload/uploadinput.vue';

	export default {
		components: {
			DiyUploadinput
		},
		data() {
			return {
				globalOption: {},
				userInfo: {},
				data: {
					code: 0,
					msg: '',
					data: {
						id: 0,
						title: null,
						value: '',
						key: '',
						sortnum: 0,
						status: '',
						userId: 0,
						createTime: '',
						updateTime: '',
						deleteTime: null
					}
				},
				saveFormLoading: false,

				form: {
					appid: '',
					secret: '',
					pay_mch_id: '',
					pay_signature: '',
					cert_path: '',
					cert_key: ''
				}
			};
		},
		methods: {
			getParamData(e, row) {
				row = row || {};
				let dataset = e.currentTarget ? e.currentTarget.dataset : e;
				if (row) {
					dataset = Object.assign(dataset, row);
				}
				return dataset;
			},
			navigateTo(e, row) {
				let dataset = this.getParamData(e, row);
				let { type } = dataset;
				if (type == 'page' || type == 'inner' || type == 'href') {
					this.router.push({
						path: dataset.url,
						query: dataset
					});
				} else if (typeof this[type] == 'function') {
					this[type](dataset);
				} else {
					ElMessage.error('待实现点击事件');
				}
			},
			async init() {
				await this.dataApi();
			},
			// 获取参数配置 API请求方法
			async dataApi(param) {
				param = param || {};
				param = this.getParamData(param);
				let http_url = '/shop/setting/get';
				let http_data = {
					key: param.key || 'wechat'
				};
				let http_header = {};

				let data = await this.$http.post(http_url, http_data, http_header, 'json');
				this.data = data;
				if (data.data) {
					this.form = JSON.parse(data.data.value);
				}
			},
			submitForm() {
				if (!this.$refs.formRef) return;
				this.$refs.formRef.validate((valid, fields) => {
					if (valid) {
						this.saveFormLoading = true;
						let param = this.form;
						let url = '/shop/setting/add';
						let data = {
							key: 'wechat',
							value: param
						};
						data.title = '微信配置';
						postData(url, data)
							.then((res) => {
								ElMessage.success(res.msg || '保存成功');
								this.saveFormLoading = false;
							})
							.finally(() => {
								this.saveFormLoading = false;
							});
					} else {
						let message = '';
						if (fields && Object.keys(fields).length > 0) {
							let field = fields[Object.keys(fields)[0]];
							let messages = field.map((item) => {
								return item.message;
							});
							message = messages.join(',');
						}
						ElMessage.error('验证未通过！' + message);
						console.log('error submit!', fields);
					}
				});
			},
			resetForm() {
				if (!this.$refs.formRef) return;
				this.$refs.formRef.resetFields();
			}
		},
		async mounted() {
			this.router = useRouter();
			this.globalOption = useRoute().query;
			const stores = useUserInfo();
			const { userInfos } = storeToRefs(stores);
			this.userInfo = userInfos;
			await this.init();
		},
		beforeUnmount() {}
	};
</script>

<style lang="scss" scoped>
	.container {
		font-size: 12px;
	}
</style>
